<template>
	<div class="common-layout">
		<el-container>
			<el-aside>
				<nav-component></nav-component>
			</el-aside>
			<el-main>
				<div class="main-content">
					<router-view></router-view>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script setup>
import NavComponent from "@/components/nav-component/nav-component.vue";
</script>

<style scoped lang="scss">
.common-layout {
	width: 100vw;
	height: 100vh;

	:deep(.el-container) {
		width: 100%;
		height: 100%;

		.el-aside {
			width: 15%;
			box-shadow: 5px 5px 10px 3px #efefef;
			height: 100%;
			box-sizing: border-box;
			background-color: #fdfbf7;
		}

		.el-main {
			overflow: auto;

			// Hiding scrollbar for Webkit browsers
			&::-webkit-scrollbar {
				display: none;
			}

			// Prevent scrollbar from taking up space (Webkit)
			-webkit-overflow-scrolling: touch;
			padding: 32px 150px;

			.main-content {
				width: 100%;
				margin: 0 auto;
				max-width: 1000px;
			}
		}

		// For other browsers, fallback to a less intrusive scrollbar
		@supports not (-webkit-overflow-scrolling: touch) {
			.el-main {
				// Custom styles for scrollbar here for Firefox, IE, etc.
				scrollbar-width: thin;
				scrollbar-color: transparent transparent; // Invisible scrollbar
			}
		}
	}
}

// Responsive styles
@media (max-width: 768px) {
	.common-layout :deep(.el-container) {
		.el-aside {
			width: 100%;
			height: auto;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
		}

		.el-main {
			padding: 20px;
		}
	}
}
</style>
